<!--  -->
<template>
  <div class="category-brand" v-if="(categoryDatas && brandDatas)">
    <!-- 分类 -->
    <div class="category">
      <ul>
        <li v-for="categoryData in categoryDatas" :key="categoryData.cat_id">
          <img :src="categoryData.touch_icon" alt="" />
          <div class="name">{{ categoryData.cat_name }}</div>
        </li>
      </ul>
    </div>
    <!-- 品牌 -->
    <div class="brand">
      <div class="title">品牌精选</div>
      <div class="brand-list">
        <ul>
          <li v-for="brandData in brandDatas" :key="brandData.brand_id">
            <img :src="brandData.brand_logo" alt="" />
            <div class="name">{{ brandData.brand_name }}</div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      // categoryDatas: [
      //   {
      //     cat_id: 1129,
      //     cat_name: "厨房电器",
      //     touch_icon:
      //       "https://x.dscmall.cn/storage/data/touch_icon/15985734207245.jpg",
      //   },
      //   {
      //     cat_id: 1105,
      //     cat_name: "大家电",
      //     touch_icon:
      //       "https://x.dscmall.cn/storage/data/touch_icon/15985734159068.jpg",
      //   },
      //   {
      //     cat_id: 1145,
      //     cat_name: "个护健康",
      //     touch_icon:
      //       "https://x.dscmall.cn/storage/data/touch_icon/15985734026258.jpg",
      //   },
      //   {
      //     cat_id: 1160,
      //     cat_name: "五金家装",
      //     touch_icon:
      //       "https://x.dscmall.cn/storage/data/touch_icon/15985733968835.jpg",
      //   },
      //   {
      //     cat_id: 1115,
      //     cat_name: "生活电器",
      //     touch_icon:
      //       "https://x.dscmall.cn/storage/data/touch_icon/15985733825468.jpg",
      //   },
      // ],
      // 品牌的数据
      // brandDatas: [
      //   {
      //     brand_id: 72,
      //     brand_name: "ELLE HOME",
      //     brand_logo:
      //       "https://x.dscmall.cn/storage/data/brandlogo/1490072313895957648.jpg",
      //   },
      //   {
      //     brand_id: 73,
      //     brand_name: "她他/tata",
      //     brand_logo:
      //       "https://x.dscmall.cn/storage/data/brandlogo/1490072329183966195.jpg",
      //   },
      //   {
      //     brand_id: 77,
      //     brand_name: "阿迪达斯",
      //     brand_logo:
      //       "https://x.dscmall.cn/storage/data/brandlogo/1490072384627679069.jpg",
      //   },
      //   {
      //     brand_id: 78,
      //     brand_name: "猫人",
      //     brand_logo:
      //       "https://x.dscmall.cn/storage/data/brandlogo/1490072399542595828.jpg",
      //   },
      //   {
      //     brand_id: 80,
      //     brand_name: "Dior",
      //     brand_logo:
      //       "https://x.dscmall.cn/storage/data/brandlogo/1490072417755830176.jpg",
      //   },
      //   {
      //     brand_id: 84,
      //     brand_name: "同仁堂",
      //     brand_logo:
      //       "https://x.dscmall.cn/storage/data/brandlogo/1490072746651935979.jpg",
      //   },
      //   {
      //     brand_id: 85,
      //     brand_name: "喜瑞",
      //     brand_logo:
      //       "https://x.dscmall.cn/storage/data/brandlogo/1490072756032175204.jpg",
      //   },
      //   {
      //     brand_id: 87,
      //     brand_name: "汤臣倍健",
      //     brand_logo:
      //       "https://x.dscmall.cn/storage/data/brandlogo/1490072777790374054.jpg",
      //   },
      //   {
      //     brand_id: 88,
      //     brand_name: "养生堂",
      //     brand_logo:
      //       "https://x.dscmall.cn/storage/data/brandlogo/1490072787223453617.jpg",
      //   },
      //   {
      //     brand_id: 89,
      //     brand_name: "健安喜",
      //     brand_logo:
      //       "https://x.dscmall.cn/storage/data/brandlogo/1490072804442637685.jpg",
      //   },
      //   {
      //     brand_id: 90,
      //     brand_name: "北大荒",
      //     brand_logo:
      //       "https://x.dscmall.cn/storage/data/brandlogo/1490072813729175306.jpg",
      //   },
      //   {
      //     brand_id: 91,
      //     brand_name: "金奥力",
      //     brand_logo:
      //       "https://x.dscmall.cn/storage/data/brandlogo/1490072823106532144.jpg",
      //   },
      // ],
    };
  },
  //计算属性 类似于data概念
  computed: {},
  props: ['categoryDatas', 'brandDatas'],
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {},
  beforeCreate() { }, //生命周期 - 创建之前
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
  },
  beforeMount() { }, //生命周期 - 挂载之前
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() { },
  beforeUpdate() { }, //生命周期 - 更新之前
  updated() { }, //生命周期 - 更新之后
  beforeDestroy() { }, //生命周期 - 销毁之前
  destroyed() { }, //生命周期 - 销毁完成
  activated() { }, //如果页面有keep-alive缓存功能，激活
  deactivated() { }, //如果页面有keep-alive缓存功能，非激活
};
</script>
<style lang="less">
.category-brand {
  width: calc(100% - 2rem);
  margin: 1rem auto;

  //   分类
  .category {
    // height: 10rem;
    padding: 1rem;
    background-color: #fff;
    border-radius: 1rem;

    ul {
      display: flex;
      align-items: center;
      margin-top: 1rem;
      flex-wrap: wrap;

      li {
        width: 20%;
        text-align: center;
        padding-top: 0.5rem;

        img {
          width: 5.4rem;
          height: 5.4rem;
        }

        .name {
          font-size: 1.2rem;
          margin-top: 0.5rem;
        }
      }
    }
  }

  //   品牌
  .brand {
    background-color: #fff;
    border-radius: 1rem;
    margin: 1rem 0;

    .title {
      font-size: 1.5rem;
      color: #000;
      padding: 2rem 2rem 1rem;
    }

    .brand-list {
      ul {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        padding: 1rem 0;

        li {
          width: 25%;
          text-align: center;
          margin: 1rem 0;

          img {
            width: 7.1rem;
            height: 3.1rem;
          }

          .name {
            font-size: 1.2rem;
            margin-top: 0.5rem;
          }
        }
      }
    }
  }
}
</style>